<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow    
      @click-left="$utils.back($route.path)"     
    />
		<div class="has-top has-bottom">
			<div>
				<div class="mlr-25">
					<div class="item pd-24">
						<div class="css-delta" />
						<div class="css-statusall flex-s-s">
								<span class="fs-28">是否同新人优惠一起参与</span>
								<van-switch v-model="checked" active-color="#2cd334" size="24px" />
						</div>
						<div class="statuscontent" v-if="checked">
							<p class="fs-28">已开启同时参与新人活动</p>
							<p class="css-content">订单金额减去新人劵金额，用此时的金额判断是否满足该促销活动，再减去促销金额为实际支付金额，支付实际金额，订单变成已付款</p>
						</div>
					</div>

					<div class="item pt-30 pb-10">
             <div class="css-h1">
								<span class="h1-left">开始时间：</span>
								<span class="h1-right" @click="openStartDateSelect">{{ startTime||'请选择开始时间' }}</span>
						 </div>
             <div class="css-h1">
								<span class="h1-left">结束时间：</span>
								<span class="h1-right" @click="openEndDateSelect">{{ endTime||'请选择结束时间' }}</span>
						 </div>
						 <div class="css-h1">
								<span class="h1-left">满减金额：</span>
								<div class="h1-right">
									<input type="number" v-model="fullReductionPrice" placeholder="请输入数字" placeholder-class="placeColor">
								</div>
						 </div>
						 <div class="css-h1">
								<span class="h1-left">满减门槛：</span>
								<div class="h1-right">
									<input type="number" v-model="fullReductionThreshold" placeholder="请输入数字" placeholder-class="placeColor">
								</div>
						 </div>
					</div>
				</div>
			</div>
		</div>
    <div class="fixed-bottom flex-center bottom-box">
      <button class="btn-large color-white bg-primary" @click="save">保存</button>
    </div>
		
    <!-- 时间选择 -->
    <van-popup v-model="startDateSelect" position="bottom">
      <van-datetime-picker
        v-model="startCurrentDate"
        item-height="45"
        visible-item-count="4"
        type="date"
        title="请选择开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onStartConfirm"
      />
    </van-popup>
    <van-popup v-model="endDateSelect" position="bottom">
      <van-datetime-picker
        v-model="endCurrentDate"
        item-height="45"
        visible-item-count="4"
        type="date"
        title="请选择结束时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onEndConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import datetimeSelect from 'components/datetimeSelect'
import { GetStoreProductCategoryList, GetStoreProductList, UpdateStoreProductOrderByByList } from 'api/store'
import utils from 'utils/utils'
export default {
  components: {
		datetimeSelect
  },
  data() {
    return {
			type:'', // 管理类型 
      // 初始
      title: '满金额促销活动',
			checked:true,
			// 时间相关
			minDate: new Date(2020, 0, 1),
      maxDate: new Date(2124, 11, 1),
      startDateSelect: false,
      startCurrentDate: new Date(),
      endDateSelect: false,
      endCurrentDate: new Date(),
			startTime:'',
			endTime:'',
			fullReductionPrice:0, // 满减金额
			fullReductionThreshold:0, // 满减门槛
    }
  },
  created() {
		//this.type = this.$route.params.type

  },
  mounted() {
   
  },
  methods: {
		openStartDateSelect() {
      if (this.startTime) {
        this.startCurrentDate = new Date(this.startTime)
      } else {
        this.startCurrentDate = new Date()
      }
      this.startDateSelect = true
    },
    openEndDateSelect() {
      if (this.endTime) {
        this.endCurrentDate = new Date(this.endTime)
      } else {
        this.endCurrentDate = new Date()
      }
      this.endDateSelect = true
    },
    onStartConfirm(val) {
      console.log(val)
      if (this.endTime && this.endCurrentDate < val) {
        this.$toast('开始时间不能晚于结束时间')
        return false
      }
      this.startTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      console.log(this.startTime)
      this.startDateSelect = false
      this.$forceUpdate()
    },
    onEndConfirm(val) {
      console.log(val)
      if (this.startTime && this.startCurrentDate > val) {
        this.$toast('结束时间不能早于开始时间')
        return false
      }
      this.endTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      console.log(this.endTime)
      this.endDateSelect = false
      this.$forceUpdate()
    },
    save(){
			if (new Date(this.endTime) < new Date(this.startTime)) {
        this.$toast('结束时间不能早于开始时间')
        return false
      }
		},
  }
}
</script>
<style lang="scss" scoped>
.item{
  background: $colorF;
  border-radius: 12px;
  margin-top: 20px;
  
  .van-cell{
    background: $colorF7;
    border-radius: 6px;
    padding: 10px 6px;
    line-height: 1.5;
  }
}
.statuscontent{
	background: #F5F6F8;
	padding: 24px;
	margin-top: 20px;
	position: relative;
	border-radius: 10px;
}
.css-delta {   
		width: 0;
    height: 0;
    border: 20px solid #F5F6F8 ;
    border-top: none !important;
    border-right-color: transparent;
    border-left-color: transparent;
    position: absolute;
    top: 183px;
		left: 80px;
		z-index: 10;
} 

.css-content{
	color: $primary;
	font-size: 24px;
	margin-top: 10px;
}
.css-h1{
	display: flex;
	height: 80px;
	margin-bottom: 30px;
	.h1-left{
		width: 230px;
		text-align: right;
		font-size: 28px;
		color: $color3;
		line-height: 80px;
	}
	.h1-right{
		width: 420px;
		border: 1px solid #c8c8c8;
		height: 80px;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 20px;
		margin-left: 10px;
		border-radius: 8px;
		font-size: 28px;
		font-weight: Medium;
	}
}
.bottom-box{
  background: $colorF;
  height: 130px;
  padding: 0 40px;
}
</style>
